<template>
    <div>
        <table>
            <thead>
                <tr>
                    <th>#</th>
                    <th>ID</th>
                    <th>待办内容</th>
                    <th>管理</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in props.tododata" :key="item.id">
                    <td>#</td>
                    <td>{{item.id}}</td>
                    <td>{{item.text}}</td>
                    <td>
                        <TodoBtn :done="item.done" :todoid="item.id"></TodoBtn>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script setup>
import TodoBtn from './TodoBtn.vue'; //不需要注册 直接引入.
const props=defineProps(["tododata"]);
//选项式API  选项配置
// export default {
//     props: ["tododata"],
//     setup() {
//         return {};
//     },
//     components: { TodoBtn } //注册
// }
</script>

<style scoped>
table{
    width:100%;
}
</style>